<template>
	<view class="page group-invite">
		<nav-header title="邀请加入群聊" :show-right="false">
		</nav-header>
		<friend-panel :friend-items="friendItems" text="确认邀请" @ok="onInviteFriends()"></friend-panel>
	</view>
</template>

<script>
	import {
		pinyin
	} from 'pinyin-pro';
	import friendPanel from '@/components/friend-panel/friend-panel.vue';
	export default {
		components: {
			friendPanel
		},
		data() {
			return {
				groupId: null,
				sourceType: 0,
				searchText: "",
				groupMembers: [],
				friendItems: [],
				selectedItems: []
			}
		},
		methods: {
			onInviteFriends() {
				let inviteVo = {
					groupId: this.groupId,
					friendIds: []
				}
				this.friendItems.forEach((f) => {
					if (f.checked && !f.disabled) {
						inviteVo.friendIds.push(f.id);
					}
				})
				if (inviteVo.friendIds.length > 0) {
					this.$http({
						url: "/group/invite",
						method: 'POST',
						data: inviteVo
					}).then(() => {
						uni.showToast({
							title: "邀请成功",
							icon: 'none'
						})
						setTimeout(() => {
							// 回退并刷新
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.loadGroupMembers();
							uni.navigateBack();
						}, 1000);

					})
				} else {
					uni.showToast({
						title: '请选择要邀请的群成员',
						icon: "error",
						duration: 1500
					});
				}
			},
			initFriendItems() {
				this.friendItems = [];
				let friends = this.friendStore.friends;
				const self = this
				friends.forEach((f => {
					if (self.sourceType == 2) {
						self.sourceType = 1
					}
					if (f.friendType == self.sourceType) {
						let item = {
							id: f.id,
							headImage: f.headImage,
							nickName: f.nickName,
							online: f.online
						}
						item.disabled = self.isGroupMember(f.id);
						item.checked = item.disabled;
						self.friendItems.push(item);
					}
				}))
				this.friendItems = this.friendItems.filter((e)=>e.nickName !== "友星缘助手")
			},
			loadGroupMembers(id) {
				this.$http({
					url: `/group/members/${id}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					this.initFriendItems();
				})
			},

			isGroupMember(id) {
				return this.groupMembers.some(m => m.userId == id);
			},

			firstLetter(strText) {
				// 使用pinyin-pro库将中文转换为拼音
				let pinyinOptions = {
					toneType: 'none', // 无声调
					type: 'normal' // 普通拼音
				};
				let pyText = pinyin(strText, pinyinOptions);
				return pyText[0];
			},
			isEnglish(character) {
				return /^[A-Za-z]+$/.test(character);
			}
		},
		computed: {
			// friendGroupMap() {
			// 	// 按首字母分组
			// 	let groupMap = new Map();
			// 	this.friendItems.forEach((f) => {
			// 		if (this.searchText && !f.nickName.includes(this.searchText)) {
			// 			return;
			// 		}
			// 		let letter = this.firstLetter(f.nickName).toUpperCase();
			// 		// 非英文一律为#组
			// 		if (!this.isEnglish(letter)) {
			// 			letter = "#"
			// 		}
			// 		if (f.online) {
			// 			letter = '*'
			// 		}
			// 		if (groupMap.has(letter)) {
			// 			groupMap.get(letter).push(f);
			// 		} else {
			// 			groupMap.set(letter, [f]);
			// 		}
			// 	})
			// 	// 排序
			// 	let arrayObj = Array.from(groupMap);
			// 	arrayObj.sort((a, b) => {
			// 		// #组在最后面
			// 		if (a[0] == '#' || b[0] == '#') {
			// 			return b[0].localeCompare(a[0])
			// 		}
			// 		return a[0].localeCompare(b[0])
			// 	})
			// 	groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
			// 	return groupMap;
			// },
			// friendIdx() {
			// 	return Array.from(this.friendGroupMap.keys());
			// },
			// friendGroups() {
			// 	return Array.from(this.friendGroupMap.values());
			// }
		},
		onLoad(options) {
			this.groupId = options.id;
			this.sourceType = options.sourceType
			this.loadGroupMembers(options.id);
		}
	}
</script>

<style lang="scss" scoped>
	.group-invite {
		position: relative;
		border: #dddddd solid 1px;
		display: flex;
		flex-direction: column;

		.confirm-text {
			font-size: 30rpx;
			color: #1989FA;
		}

		.search {
			padding-bottom: 20rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 100%;
			// margin: 0 auto;
			padding: 10rpx 32rpx;

			:deep(.u-search__content) {
				border-radius: 30px !important;
				height: 72rpx;
			}

			:deep(.u-search) {
				border-radius: 30px !important;
				border: 1rpx solid $gray-200;
			}
		}

		.friend-items {
			position: relative;
			flex: 1;
			// overflow: hidden;
			padding-bottom: 174rpx;

			.friend-item {
				height: 120rpx;
				display: flex;
				margin-bottom: 1rpx;
				position: relative;
				padding: 0 30rpx;
				align-items: center;
				background-color: white;
				white-space: nowrap;

				.friend-checked {
					margin-right: 20rpx;
				}

				.friend-name {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 60rpx;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.scroll-bar {
				height: 100%;
			}
		}

		.tabbar {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding-bottom: 42rpx;
			border-top: 1rpx solid $gray-200;
			background-color: $white;
			z-index: 100;

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;

				.left {
					color: $gray-900;
				}

				.right {
					.btncolor {
						background-color: $brand-500;
						color: $white;
						padding: 16rpx 32rpx;
						border-radius: 40rpx;
						text-align: center;
						line-height: 46rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
</style>